<template>
  <div
    id="app"
    :class="{
      'has-tabbar': $route.meta.tabBar || $route.query.x666 === 'tabbar',
      'has-header': hasHeader
    }"
  >
    <Header v-if="hasHeader" />
    <keep-alive>
      <router-view
        v-if="$route.meta.keepAlive"
        ref="curRoute"
        class="router-view"
      />
    </keep-alive>
    <router-view
      v-if="!$route.meta.keepAlive"
      ref="curRoute"
      class="router-view"
    />
    <van-tabbar
      v-if="$route.meta.tabBar || $route.query.x666 === 'tabbar'"
      v-model="active"
      :z-index="1999"
      class="my-tabbar"
    >
      <van-tabbar-item
        :to="{name: 'home'}"
      >
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? homeIcon.active : homeIcon.normal"
        >
        首页
      </van-tabbar-item>
      <van-tabbar-item
        :to="{name: 'courseIndex'}"
      >
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? classIcon.active : classIcon.normal"
        >
        学习
      </van-tabbar-item>
      <van-tabbar-item
        :to="{name: 'liveList'}"
      >
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? examIcon.active : examIcon.normal"
        >
        直播
      </van-tabbar-item>
      <van-tabbar-item
        :replace="false"
        :to="{name: 'myIndex'}"
      >
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? mineIcon.active : mineIcon.normal"
        >
        我的
      </van-tabbar-item>
    </van-tabbar>
    <van-dialog
      v-model="showDialog"
      title="登录信息已失效，请重新登录"
      show-cancel-button
      class="global-dialog"
      confirm-button-text="登录"
      :before-close="onBeforeDialogClose"
    >
      <LoginForm
        ref="loginForm"
        :in-dialog="true"
      />
    </van-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { browser } from '@/lib/utils'
import { AppInfo } from '@/lib/appMethods'
export default Vue.extend({
  components: {
    Header: () => import(/* webpackChunkName: "Header" */ 'components/Layout/Header.vue'),
    LoginForm: () => import(/* webpackChunkName: "login" */ 'components/Login/LoginForm.vue'),
  },
  data () {
    return {
      active: 0,
      homeIcon: {
        active: require('assets/tabbar/home-active.png'),
        normal: require('assets/tabbar/home.png'),
      },
      classIcon: {
        active: require('assets/tabbar/class-active.png'),
        normal: require('assets/tabbar/class.png'),
      },
      examIcon: {
        active: require('assets/tabbar/test-active.png'),
        normal: require('assets/tabbar/test.png'),
      },
      mineIcon: {
        active: require('assets/tabbar/mine-active.png'),
        normal: require('assets/tabbar/mine.png'),
      },
    }
  },
  computed: {
    showDialog: {
      set () {
        this.$store.commit('SET_GLOBAL_DIALOG', '')
      },
      get (): boolean {
        return !!this.$store.state.showGlobalDialog
      },
    },
    hasHeader (): boolean {
      // return true
      // return AppInfo.isApp && !this.$route.query.noNavbar
      return this.$route.name !== 'home' && !this.$route.query.noNavbar &&
      !browser.isWechat && !browser.isQQ
    },
  },
  methods: {
    onBeforeDialogClose (action: any, done: any) {
      if (action === 'confirm') {
        (this.$refs.loginForm as any).validateForm().then(() => {
          done()
          if (this.$route.name === 'examIndex') {
            window.location.reload()
          }
        })
      } else {
        done()
      }
    },
  },
})
</script>

<style lang="scss">
@import "~scss/global.scss";
// @import "~scss/inApp.scss";
.global-dialog {
  .van-dialog__content {
    padding-top: 30px;
  }
}
</style>
<style lang="scss" scoped>
#app {
  position: relative;
  // eslint-disable-next-line
  /* eslint-disable-next-line */
  font-family: -apple-system,BlinkMacSystemFont,Helvetica,"Microsoft Yahei",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  // /deep/ .page-view {
  //   min-height: calc(100% + 1px);
  // }
}
.has-header {
  position: relative;
  // navbar高度
  padding-top: $navBarHeight;
  // background: #f2f3f8;
}
.has-tabbar {
  padding-bottom: 1.33333rem;
}
.router-view {
  position: relative;
  height: 100%;
  // @include iosScroll;
  -webkit-perspective: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &::after {
    // 解决ios卡顿问题
    position: absolute;
    left: -1;
    top: 0;
    content: "";
    width: 1px;
    min-height: calc(100% + 1px);
  }
}
img {
  max-width: 100%;
}
// .router-view {
//   overflow: hidden;
// }
.my-tabbar {
  /deep/ .van-tabbar-item--active {
    color: $primary-web;
  }
}
</style>
